<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="keywords" content="">
  <meta name="author" content="">
  <meta name="robots" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>通知列表</title>
  <link href="/css/nice-select.css" rel="stylesheet">
  <link href="/css/jquery.dataTables.min.css" rel="stylesheet">
  <link href="/css/style.css" rel="stylesheet">
</head>
<body>

<div class="container-fluid">
  <div class="d-flex align-items-center mb-4 flex-wrap mt-4">
    <h4 class="fs-20 font-w600 me-auto">通知列表</h4>
  </div>
  <div class="row">
    <div class="col-xl-12">
      <div class="table-responsive">
        <table class="table display mb-4 dataTablesCard job-table table-responsive-xl card-table" id="example5">
          <thead>
          <tr>
            <th>序号</th>
            <th>通知标题</th>
            <th>通知级别</th>
            <th>通知类型</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr th:each="notification, iterStat : ${notifications}">
            <td th:text="${iterStat.count}">1</td>
            <td th:text="${notification.title}">通知标题</td>
            <td th:text="${notification.level == 1 ? '管理员' :
              notification.level == 2 ? '求职者' :
              notification.level == 3 ? '招聘者' :
              notification.level == 4 ? '公共' : '未知'}">级别</td>
            <td th:text="${notification.type == 1 ? '重要通知' : '普通通知'}">类型</td>
            <td th:text="${#temporals.format(notification.createTime, 'yyyy-MM-dd HH:mm')}">时间</td>
            <td class="text-center">
              <div class="action-buttons d-flex">
                <a href="javascript:void(0);" class="btn btn-success light mr-2"
                   th:onclick="'viewNotification(' + ${notification.id} + ')'">
                  <svg xmlns="http://www.w3.org/2000/svg" class="svg-main-icon" width="24px" height="24px" viewbox="0 0 32 32" x="0px" y="0px">
                    <g data-name="Layer 21">
                      <path d="M29,14.47A15,15,0,0,0,3,14.47a3.07,3.07,0,0,0,0,3.06,15,15,0,0,0,26,0A3.07,3.07,0,0,0,29,14.47ZM16,21a5,5,0,1,1,5-5A5,5,0,0,1,16,21Z" fill="#000000" fill-rule="nonzero"></path>
                      <circle cx="16" cy="16" r="3" fill="#000000" fill-rule="nonzero"></circle>
                    </g>
                  </svg>
                </a>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<script src="/js/sweetalert.js"></script>
<script src="/js/jquery.3.6.0.js"></script>
<script src="/js/global.min.js"></script>
<script src="/js/Chart.bundle.min.js"></script>
<script src="/js/jquery.nice-select.min.js"></script>
<script src="/js/bootstrap-datepicker.min.js"></script>
<script src="/js/jquery.dataTables.min.js"></script>
<script src="/js/datatables.init.js"></script>

<script>
  function viewNotification(notificationId) {
    window.location.href = "/user/notification/view/" + notificationId;
  }
</script>

</body>
</html>